<template>
  <view class="password-container">
    <PageHeader title="安全设置" :showBack="true" />
    <view class="header">
      <!-- <view class="header-title">安全设置</view> -->
      <view class="header-desc text-[28rpx]">全方位保护您的账户安全</view>
    </view>

    <view class="cell-list">
      <view class="cell-item" v-for="item in cellList" :key="item.id" @click="handleCellClick(item)">
        <view class="cell-icon">
          <!-- <Icon :name="item.icon" :class="item.iconClass" /> -->
          <IconFont font-class-name="iconfont" class-prefix="icon" :name="item.icon" size="30" color="#4a6bff" />
        </view>
        <view class="cell-content">
          <view class="cell-title">{{ item.title }}</view>
          <view class="cell-desc">{{ item.desc }}</view>
        </view>
        <view class="cell-arrow">
          <!-- <Icon name="arrow-right" class="arrow-icon" /> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
// import {}
import Taro,{useDidShow} from "@tarojs/taro";
// import { Icon } from "@tarojs/components";
import { useUserStore } from "@/store/user";
import PageHeader from '@/components/PageHeader.vue'
import { IconFont } from "@nutui/icons-vue-taro";
import { post } from "@/utils/request";

const userStore = useUserStore();
// console.log(userStore.userInfo.password);  

useDidShow(() => {
  isPassword.value == '1' ? cellList.value[0].title = "修改登录密码" : cellList.value[0].title = "初始化登录密码"
  ispayPassword.value == '1'? cellList.value[1].title = "修改支付密码" : cellList.value[1].title = "初始化支付密码"
})
// 初始化密码 0-没有 1-有
const isPassword = computed(() => {
  return userStore.userInfo.password;
});
const ispayPassword = computed(() => {
  return userStore.userInfo.pay_password;
});


// const isPassword = 1

// 单元格数据
const cellList = ref([
  {
    id: 1,
    title: isPassword.value == 1 ? "修改登录密码" : "初始化登录密码",
    desc: "设置6-20位登录密码",
    icon: "denglumima-",
    iconClass: "icon-lock",
    path: {
      login: "/pages-detail/mine/safe/modify/loginPassword",
      register: "/pages-detail/mine/safe/modify/registerPassword",
    },
  },
  {
    id: 2,
    title: ispayPassword.value == 1 ? "修改支付密码" : "初始化支付密码",
    desc: "设置6位数字交易密码",
    icon: "zhifumima",
    iconClass: "icon-credit-card",
    path: {
      login: "/pages-detail/mine/safe/modify/payPassword",
      register: "/pages-detail/mine/safe/modify/registerPayPassword",
    }
    // path: "/pages-detail/mine/modify/payPassword?type=0",
  },
  {
    id: 3,
    title: "账户注销",
    desc: "注销后账户数据将被清空且无法恢复",
    icon: "tuichu",
    iconClass: "icon-delete",
    path: null,
    isDeregister: true,
  },
]);

// 监听
watch([isPassword, ispayPassword], (value) => {
  console.log(value);
  value[0] == 1 ? cellList.value[0].title = "修改登录密码" : cellList.value[0].title = "初始化登录密码"
  value[1] == 1 ? cellList.value[1].title = "修改支付密码" : cellList.value[1].title = "初始化支付密码"
});

// 处理单元格点击
const handleCellClick = (item) => {
  // 处理账户注销
  if (item.isDeregister) {
    handleDeregister();
    return;
  }

  if (item.title == "修改登录密码") {
    Taro.navigateTo({
      url: item.path.login,
    });
    return
  }
  if (item.title == "修改支付密码") {
    Taro.navigateTo({
      url: item.path.login
    });
    return
  }

  Taro.navigateTo({
    url: item.path.register,
  });
};

/**
 * 处理账户注销
 * @description 用户确认注销账户后，调用注销接口并清除本地数据
 */
const handleDeregister = () => {
  Taro.showModal({
    title: "账户注销",
    content: "注销后账户数据将被清空且无法恢复，确定要注销账户吗？",
    confirmText: "确定注销",
    cancelText: "取消",
    confirmColor: "#FF4D4F",
    success: (res) => {
      if (res.confirm) {
        // 用户确认注销
        Taro.showLoading({
          title: "注销中...",
          mask: true,
        });

        post("/my/deregister")
          .then((response) => {
            Taro.hideLoading();
            
            if (response.code === 0) {
              // 注销成功
              Taro.showToast({
                title: "账户已注销",
                icon: "success",
                duration: 2000,
              });

              // 清除用户信息和本地存储
              Taro.removeStorageSync("userInfo");
              Taro.removeStorageSync("token");
              // 延迟跳转到登录页面
              setTimeout(() => {
                Taro.reLaunch({
                  url: "/pages/webs/register",
                });
                Taro.clearStorageSync()
              }, 2000);
            } else {
              // 注销失败
              Taro.showToast({
                title: response.msg || "注销失败，请重试",
                icon: "none",
                duration: 2000,
              });
            }
          })
          .catch((error) => {
            Taro.hideLoading();
            console.error("注销失败:", error);
            Taro.showToast({
              title: "注销失败，请重试",
              icon: "none",
              duration: 2000,
            });
          });
      }
    },
  });
};
</script>

<style scoped>
.password-container {
  width: 100%;
  min-height: 100vh;
}

.header {
  padding: 40rpx 0;
  text-align: center;
  margin-bottom: 30rpx;
  /* background: linear-gradient(135deg, #1a73e8, #4285f4); */
  /* border-radius: 20rpx; */
  color: #999;
  /* box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); */
}

.header-title {
  font-size: 38rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.header-desc {
  opacity: 0.9;
}

.cell-list {
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.cell-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.cell-item:last-child {
  border-bottom: none;
}

.cell-item:active {
  background-color: #f9f9f9;
  transform: scale(0.99);
}

.cell-icon {
  width: 52rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  background-color: #e8f0fe;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(26, 115, 232, 0.15);
}

.icon-lock {
  color: #1a73e8;
  font-size: 32rpx;
}

.icon-credit-card {
  color: #34a853;
  font-size: 32rpx;
}

.icon-share-alt {
  color: #fbbc05;
  font-size: 32rpx;
}

.cell-content {
  flex: 1;
}

.cell-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.cell-desc {
  font-size: 24rpx;
  color: #666;
  margin-top: 6rpx;
}

.cell-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon {
  color: #999;
  font-size: 28rpx;
  transition: transform 0.3s ease;
}

.cell-item:hover .arrow-icon {
  transform: translateX(6rpx);
}
</style>
